<template>
    <div>
        <h1>情况四：监视reactive，ref定义的对象类型数据</h1>
        <h2>姓名：{{person.name}}</h2>
        <h2>年龄：{{person.age}}</h2>
        <h2>第一辆车：{{person.car.c1}}</h2>
        <h2>第二辆车：{{person.car.c2}}</h2>
        <h2>整个车：{{person.car}}</h2>
        <button @click="updateName">修改姓名</button>
        <button @click="updateAge">修改年龄</button>
        <button @click="updateFirstCar">修改第一辆车</button>
        <button @click="updateSecCar">修改第二辆车</button>
        <button @click="updateCar">修改整个车</button>
    </div>
</template>

<script setup lang="ts" name="Person">
import {watch, reactive} from "vue";
let person = reactive({
    name: 'zs',
    age: 13,
    car: {
        c1: '奥迪',
        c2: '宝马'
    }
})
function updateName() {
    person.name = 'lisi'
}
function updateAge() {
    person.age = 44
}
function updateFirstCar() {
    person.car.c1 = '雅迪'
}
function updateSecCar() {
    person.car.c2 = '小刀'
}
function updateCar() {
    person.car = {c1: 'hafhafh',c2: 'fjlaflfjf'}
}
// 如果该属性值不是对象类型，需要写成函数形式
// 如果该属性值依然是对象类型，可直接编，也可写成函数式，建议写成函数式，有需要就开启深度监视
watch(()=>person.name,(newValue,oldValue)=> {
    console.log('person.name变化了',newValue,oldValue)
})

watch(()=>person.car,(newValue,oldValue)=> {
    console.log('person.car变化了',newValue,oldValue)
},{deep: true})
</script>

<style scoped>
button {
    margin-right: 10px;
}
</style>
